<template>
  <div class="keshihua">
    <h6>AQI变化趋势<span>柱状图</span></h6>
    <div id="main" style="width: 100%; height: 200px"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { hourAirQuery } from '../../service/cityService'
let hourList: any = ref([]);
let aqi:any=ref([])
let hours:any=ref([]);
let id = ref('')
let name = ref('')
let aa = localStorage.getItem('city')
if (aa?.length) {
  id.value = JSON.parse(aa).id
  name.value = JSON.parse(aa).name
}

let airQuery = async () => {
  let { data } = await hourAirQuery({
    key: 'S_kv1Ro8FrmQ4UeD9',
    location: name.value,
    language: 'zh-Hans',
    days: 1
  })
  hourList.value = data.results[0].hourly

  for (var i = 0; i < hourList.value.length; i++) {
    hourList.value[i].time = hourList.value[i].time.slice(11, 16)
    hours.value[i]=hourList.value[i].time
    aqi.value[i]=hourList.value[i].aqi;
  }
}

onMounted(async() => {
  await airQuery();
  let chartDom: any = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    xAxis: {
      type: 'category',
      data: hours.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: aqi.value,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }

  option && myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.keshihua {
  box-sizing: border-box;
    margin-top: 20px;
    padding: 10px;
h6{
    margin: 0;
}
}
</style>
